$(function () {
      // 1. 点击按钮给对应的按钮加上active类名; 
      // 2. 让页面滚动到对应的位置; 

      // 位置数组 
      // - 获取所有content元素距离文档顶部的高度; 
      let top_list = [];
      let $contents = $(".content");

      $.each($contents, function (index, ele) {
            // console.log( index , ele );
            // 获取元素的高度放入到 top_list之中; 
            top_list.push($(ele).offset().top);
      })

      $(".btn-list li").click(function () {
            // 把功能进行封装方便阅读代码; 
            // - 更改函数的this指向方便程序使用当前触发事件的dom对象; 
            changeClass.call(this)
            // - 切换页面的scrollTop ;
            // - 传入当前按钮的下标; 
            var index = $(this).index(".btn-list li");
            changeScrollTop(index);
      })

      function changeClass() {
            $(this)
                  .addClass("active")
                  .siblings()
                  .removeClass("active")
      }

      function changeScrollTop(index) {
            // 切换页面的scrollTop;
            $("html,body")
                  .stop(true)
                  .animate({
                        scrollTop: top_list[index] + 2
                  })
      }
      // 根据滚动的scrollTop 获取当前楼层下标; 


      $(window).scroll(function () {
            var index = getIndex();

            changeBtnClass(index);
      });

      function getIndex() {
            var scrollTop = $("html,body").scrollTop();
            // 获取下标的算法; 

            if (scrollTop >= top_list[top_list.length - 1]) {
                  return top_list.length - 1;
            }

            // [0,1000,2000,3000,4000,5000]
            // 大于前一项小于后一项，就是所在下标;
            // - 这个规则无法判断数组最后一项数据; 
            // - 我们提前判断数组的最后一项; 
            for (let i = 0; i < top_list.length - 1; i++) {
                  if (scrollTop >= top_list[i] && scrollTop < top_list[i + 1]) {
                        // i就是当前下标; 
                        return i;
                  }
            }
      }

      function changeBtnClass(index) {
            $(".btn-list li")
                  .removeClass("active")
                  .eq(index)
                  .addClass("active")
      }     
})